<template>
<div class="content">
    <compExtend 
        :propsList="propsList"
        :tpl="tpl" :bindConfig="bindConfig"
    >
        <h2 class="subTitle">示例</h2>
        <Card dis-hover>
            <!-- 此处写组件的引用 -->
            <div class="flex" style="width: 100%; justify-content: space-around;">
                <Button @click="testApi">自定义api</Button>
                <Button @click="eventExecuteApi">eventExecute</Button>
                <Button @click="modelConfigurationApi">模型配置api</Button>
                <Button @click="modelInstanceApi">模型实例api</Button>
            </div>
        </Card>
    </compExtend>
</div>
</template>

<script>
import compExtend from '../parts/compExtend'
export default {
    components: { compExtend },
    data() {
        // 组件的所有参数
        let bindConfig = {
            Test: `this.$api.Test.queryInfoByPage(1, 12, {condition: ''})`,
            eventExecute: `this.$api.business.eventExecute({ category: '分类', name: 'product1', data: { params: {}, back: [] } })`,
            modelConfiguration: ` this.$api.ConsumeConfiguration.query({condition: ''}) `,
            modelInstance: ` this.$api.ConsumeInstance.query({condition: ''}) `,
        }
        // 组件的props说明
        let propsList = [   
            {
                title: 'api',
                data: [
                    {
                        name: 'Test', type: 'object', default:  ``,
                        desc: `<b>自定义api:</b> 新业务接口参考的例子，配置路径: public/service/scenario/function/Test;`
                    },
                    {
                        name: 'eventExecute', type: 'object', default: " - ",
                        desc: `<b>执行事件接口</b>（需要先在事件管理中配置事件）`
                    },
                    {
                        name: 'modelConfiguration', type: 'object', default: " - ",
                        desc: `<b>模型配置api: </b>; </br>模型包括: consume、resource、logic、logicStatic、twins、workCenter、routing`
                    },
                    {
                        name: 'modelInstance', type: 'object', default: " - ",
                        desc: `<b>模型实例api:</b> 对模型实例执行增删改查（业务生成的数据记录）`
                    },
                ]
            },
        ];
        // 组件引用实例
        let tpl = ``  

        return {
            tpl,
            bindConfig,
            propsList,
        }
    },
    methods: {
        testApi() {
            this.$api.Test.queryInfoByPage(1, 12, {condition: "category like '%分类%' && name = 'e2'"})
        },
        eventExecuteApi() {
            this.$api.business.eventExecute({
                category: '分类',
                name: 'product1',
                data: {
                    params: {condition: "type like '%product%' && className = '料片'"},
                    back: ['result']
                }
            })
        },
        modelConfigurationApi() {
            this.$api.ConsumeConfiguration.query({condition: "type like '%product%' && className = '料片'"})
        },
        modelInstanceApi() {
            this.$api.ConsumeInstance.query({condition: "type like '%product%' && className = '料片'"})
        }
    },
    props: {
    }
}
</script>

<style scoped lang="less">
.content {
    /deep/ textarea.jsoneditor-text, /deep/ .ace-jsoneditor {
        min-height: 600px;
    }
}
</style>